<template>
  <div class="book">
    <div class="card" @click="pushInfo(item.id)" v-for="(item,index) in listDat" v-bind:key="index">
      <div class="title">
        {{item.title}}
      </div>
      <hr>
      <br>
      <div class="content">
        {{item.content}}
      </div>
      <br>
      <div class="info">
        <i class="fa fa-calendar"></i> {{$moment(item.creatdatetime).format("YYYY-MM-DD hh:mm:ss")}}  <i class="fa fa-folder-open-o"></i> {{item.type}}<i
        class="fa fa-user-o"></i> {{item.realName}}
      </div>
    </div>
    <el-pagination
      background
      :total="total"
      @current-change="currentChange"
      layout="prev, pager, next ,total"></el-pagination>

  </div>
</template>

<script>
  export default {
    name: 'Book',
    data () {
      return {
        pageNum: 1,
        limit: 10,
        pagin: false,
        listDat: [ ],
        total: 0
      }
    },
    created(){
      this.getData()
    },
    methods: {
      pushInfo (id) {
        this.$router.push({name:'Info', params: {id: id}});
      },
      currentChange (val) {
        this.pageNum = val
        this.getData()
      },
      getData(){
        let _this = this
        let map = {}
        map.page = this.pageNum
        map.limit = this.limit

        this.$api.getBookList(map).then(res=>{
          _this.listDat = res.data.list
          _this.total = res.data.total
        })
      }
    }
  }
</script>

<style scoped>

  .card {
    margin: 0px auto 16px auto;
    background: #ffffff;
    border-radius: 12px;
    /*box-shadow: -4px 0px 6px 0px #f1eded,*/
    /*4px 0px 6px 0px #f1eded,*/
    /*0px 4px 6px 0px #f1eded,*/
    /*0px -4px 6px 0px #f1eded;*/
    padding: 20px;
    text-align: left;
  }

  .card:hover {
    cursor: pointer;
  }

  .title {
    font-size: 25px;
    color: #504E4E;
  }

  .info i:nth-child(2), .info i:nth-child(3) {
    padding-left: 10px;
  }

  .content, .info {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #828282;
  }

  hr {
    border: none;
    height: 1px;
    background: #eee;
    margin-top: 12px
  }
</style>
